<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: `${!editing ? '新增' : '修改'}卡项`,
			size: '35%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@confirm="submit"
		:saving="saving"
		@close="reset"
	>
		<el-form :model="form" :rules="rules" ref="form" label-position="top" :disabled="saving">
			<el-card shadow="never">
				<!-- <el-form-item class="mt-3" prop="cover">
						<cl-upload ref="uploads" v-model="form.cover" />
					</el-form-item> -->

				<el-row :gutter="20">
					<el-col :span="12">
						<el-form-item label="所属事业部" prop="biz_id">
							<cl-select
								v-model="form.biz_id"
								placeholder="请选择"
								style="width: 100%"
								@change="changeBiz"
								filterable
								:disabled="editing"
							>
								<el-option
									v-for="item in business"
									:key="item.value"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卡项名称" prop="sc_name">
							<el-input v-model="form.sc_name" placeholder="名称" />
						</el-form-item>
					</el-col>
					<el-col>
						<!-- <el-divider /> -->
						<el-form-item label="卡项类型" prop="sc_type">
							<el-radio
								v-model="sc_type"
								v-for="(item, index) in cardTypeOpt"
								:key="index"
								@change="changeCardType(item)"
								:label="item.value"
								class="mb-1"
							>
								{{ item.label }}
							</el-radio>
						</el-form-item>
					</el-col>

					<el-col :span="12" v-if="sc_type == 1">
						<el-form-item label="卡项面额" prop="vprice">
							<el-input
								v-model.number="form.vprice"
								@blur="form.vprice = Number($event.target.value)"
								oninput="value=value.replace(/[^\d^\.]/g,'')"
								placeholder="卡项面额"
							/>
						</el-form-item>
					</el-col>
					<el-form-item label="使用范围" v-else prop="list">
						<div class="pa-1">
							<template v-if="form.list.length > 0">
								<el-table
									:data="form.list"
									border
									stripe
									height="200"
									:header-cell-style="{ textAlign: 'center' }"
									:cell-style="{ textAlign: 'center' }"
									class="mb-2"
								>
									<el-table-column type="index" label="#" />
									<el-table-column prop="si_name" label="分类名称" />
									<el-table-column label="数量" v-if="sc_type == 5">
										<template slot-scope="{ row }">
											<el-input
												v-model.number="row.nums"
												@blur="row.nums = Number($event.target.value)"
												oninput="value=value.replace(/[^\d]/g,'')"
											/>
										</template>
									</el-table-column>
									<el-table-column label="操作" width="100">
										<template slot-scope="{ $index }">
											<el-button
												@click="handleClickDel($index, 0)"
												type="text"
												size="small"
											>
												删除
											</el-button>
										</template>
									</el-table-column>
								</el-table>
								<!-- 折扣卡 -->
								<div
									style="background: #ebeef5"
									class="flex flex-justify-between pa-1 mb-2"
									v-if="sc_type == 2"
								>
									<span>卡折扣</span>
									<span>
										<el-input
											v-model="form.discount"
											@blur="form.discount = $event.target.value"
											oninput="value=value.replace(/[^\d^\.]/g,'')"
											size="mini"
										/>
										%
									</span>
								</div>
								<!-- 疗程总次卡 -->
								<div
									style="background: #ebeef5"
									class="flex flex-justify-between pa-1 mb-2"
									v-if="sc_type == 4"
								>
									<span>总次数</span>
									<span>
										<el-input
											v-model.number="form.allcount"
											@blur="form.allcount = Number($event.target.value)"
											size="mini"
											oninput="value=value.replace(/[^\d]/g,'')"
										/>
									</span>
								</div>
							</template>
							<div class="flex flex-justify-center">
								<cl-choice-service
									v-model="form.list"
									:biz_id="form.biz_id"
									@confirm="confirmList"
									:upgrade="[3, 4, 5].includes(sc_type)"
								/>
							</div>
						</div>
					</el-form-item>
					<el-col :span="12">
						<el-form-item label="卡项售价" prop="price">
							<el-input
								v-model="form.price"
								@blur="form.price = $event.target.value"
								oninput="value=value.replace(/[^\d^\.]/g,'')"
								placeholder="卡项售价"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卡项状态" prop="status">
							<cl-select
								v-model="form.status"
								placeholder="请选择卡项状态"
								style="width: 100%"
								filterable
							>
								<el-option label="上架" :value="1" />
								<el-option label="下架" :value="2" />
							</cl-select>
						</el-form-item>
					</el-col>
					<!-- <el-form-item label="卡项状态" prop="price_label">
					<cl-select
						v-model="form.lasttime"
						placeholder="请选择"
						style="width: 100%"
						filterable
					>
						<el-option
							v-for="item in lasttimeOpt"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</cl-select>
				</el-form-item> -->
					<el-col :span="12">
						<el-form-item label="生效日期" prop="stime_type">
							<cl-select
								v-model="form.stime_type"
								placeholder="请选择"
								style="width: 100%"
								filterable
							>
								<el-option label="购买时间" :value="1" />
								<el-option label="首次使用时间" :value="2" />
							</cl-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="有效期" prop="etime_type">
							<cl-select
								v-model="form.etime_type"
								placeholder="请选择"
								style="width: 100%"
								filterable
							>
								<el-option label="永久" :value="1" />
								<el-option label="三个月" :value="3" />
								<el-option label="半年" :value="6" />
								<el-option label="一年" :value="12" />
								<el-option label="二年" :value="24" />
								<el-option label="三年" :value="36" />
							</cl-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卡项标签" prop="tag_id">
							<cl-select
								v-model="form.tag_id"
								placeholder="请选择卡项标签"
								style="width: 100%"
								filterable
							>
								<el-option
									v-for="item in tagList"
									:key="item.id"
									:label="item.tname"
									:value="item.id"
								/>
							</cl-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卡项用途" prop="sc_use">
							<el-checkbox-group v-model="form.sc_use" style="height: 29px">
								<el-row type="flex" align="center" style="height: 100%">
									<el-checkbox label="1">售卖</el-checkbox>
									<el-checkbox label="2">赠送</el-checkbox>
								</el-row>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="卡项分类" prop="category">
							<cl-cascader
								style="width: 100%"
								v-model="form.category"
								:options="cateList"
								placeholder="请选择卡项分类"
								filterable
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-card>
		</el-form>
	</cl-drawer>
</template>
<script>
export default {
	inject: ["parent"],
	props: {
		type: {
			type: String,
			default: "add"
		},
		info: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			cardTypeOpt: [
				{ value: 1, label: "储值卡" },
				// { value: 2, label: "折扣卡" },
				{ value: 3, label: "时段卡" },
				{ value: 4, label: "疗程总次卡" }
				// { value: 5, label: "疗程分次卡" }
			],
			sc_type: 1, //卡类型
			form: {
				cover: "",
				sc_id: "", //id
				biz_id: "", //公司ID
				sc_type: 4, //类型
				sc_name: "", //名称
				tag_id: "",
				price: "", //售价
				vprice: "", //卡面额
				stime_type: 1, //生效日期
				etime_type: 3, //有效期
				sc_use: ["1"], //卡项用途
				shopping_display: 0, //商城展示
				discount: 90, //卡折扣
				allcount: 1, //总次卡
				list: [],
				status: 1,
				category: [] //卡项分类
			},
			rules: {
				// cover: [{ required: true, message: "请上传卡项主图" }],
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				sc_name: [{ required: true, message: "请填写卡项名称" }],
				sc_type: [{ required: true, message: "请选择卡项类型" }],
				vprice: [{ required: true, message: "请填写卡项面额" }],
				price: [{ required: true, message: "请填写卡项售价" }],
				status: [{ required: true, message: "请选择卡项状态" }],
				stime_type: [{ required: true, message: "请选择生效日期" }],
				etime_type: [{ required: true, message: "请选择有效期" }],
				tag_id: [{ required: true, message: "请选择卡项标签" }],
				list: [{ required: true, message: "请选择服务" }],
				category: [{ required: true, message: "请选择卡项分类" }]
			},
			createCard: false, //是否同步创建卡
			tagList: [], //标签选项
			cateList: [],
			saving: false,
			editing: false
		};
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(editing = false, data) {
			this.$refs.drawer.create();
			this.editing = editing;
			this.getCateList();
			if (!editing) {
				this.getTagList();
				return;
			}
			this.getDetail(data);
		},
		reset() {
			this.sc_type = 4;
			this.form = {
				cover: "",
				sc_id: "", //id
				biz_id: this.getCurrBiz(), //公司ID
				sc_type: 4, //类型
				sc_name: "", //名称
				tag_id: "",
				price: "", //售价
				vprice: "", //卡面额
				stime_type: 1, //生效日期
				etime_type: 1, //有效期
				sc_use: ["1"], //卡项用途
				shopping_display: 0, //商城展示
				discount: 90, //卡折扣
				allcount: 1, //总次卡
				list: [],
				status: 1,
				category: []
			};
			this.$refs.form.resetFields();
		},
		close() {
			this.$refs.drawer.close();
		},
		async getDetail(data) {
			const res = await this.$service.servicecard.info({
				sc_id: data.sc_id,
				biz_id: data.biz_id
			});
			this.form = {
				...res,
				sc_use: res.sc_use ? res.sc_use.split(",") : [],
				discount: res.content_data.discount, // 卡片折扣
				allcount: res.content_data.allcount || 1, //总次卡
				// 卡片内容 商品
				list: (res?.content_data?.data ?? []).map(item => ({
					si_id: item.id,
					price: item.price,
					nums: item.nums,
					si_name: item.name,
					picture_url: item.picture_url,
					type: item.type
				})),
				category: !res.f_category && !res.s_category ? [] : [res.f_category, res.s_category]
			};
			// 卡项有效期
			if (res.etime_type == 2) {
				this.form.etime_type = res.fixed_num;
			}
			this.sc_type = res.sc_type;
			this.getTagList();
		},
		changeBiz(e) {
			this.form.tag_id = "";
			this.form.list = [];
			this.form.category = [];
			this.getTagList();
			this.getCateList();
		},
		async getCateList() {
			const { biz_id } = this.form;
			const res = await this.$service.service.getType({
				type: 1,
				biz_id
			});
			this.cateList = res.map(item => {
				return {
					...item,
					value: item.id,
					label: item.cname,
					children: item.childlist.map(itm => {
						return {
							...itm,
							value: itm.id,
							label: itm.cname
						};
					})
				};
			});
		},
		async getTagList() {
			const { biz_id } = this.form;
			this.tagList = [];
			if (!biz_id) return;
			const data = await this.$service.tag.lists({
				biz_id,
				type: 3,
				status: 1
			});
			this.tagList = data?.lists ?? [];
		},
		changeCardType(item) {
			console.log(item);
			this.sc_type = item.value;
			this.form.list = [];
		},
		// 删除已选的分类
		handleClickDel(index, type) {
			if (type == 0) {
				this.form.list.splice(index, 1);
			}
		},
		confirmList(e) {
			this.form.list = e.map(v => ({ ...v, nums: 1 }));
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const {
					category,
					etime_type,
					sc_use,
					list,
					discount,
					allcount,
					...args
				} = this.form;

				let content_data = { format_type: this.sc_type };
				let arr = list.map(v => ({ id: v.si_id, nums: v.nums }));
				switch (this.sc_type) {
					case 1:
						content_data = { format_type: 1 };
						break;
					case 3:
						content_data = {
							format_type: 3,
							discount,
							item: { data: [], cate: arr },
							product: { data: [], cate: [] }
						};
						break;
					case 4:
						content_data = {
							format_type: 4,
							allcount,
							item: arr,
							product: []
						};
						break;
					case 5:
						content_data = {
							format_type: 5,
							allcount: 1,
							item: arr,
							product: []
						};
						break;
					default:
						break;
				}
				this.saving = true;
				let form = {
					...args,
					dept_id: "*",
					sc_type: this.sc_type,
					consume: 1,
					etime_type: etime_type != 1 ? 2 : 1,
					fixed_type: 1,
					fixed_num: etime_type != 1 ? etime_type : 1,
					sc_use: sc_use.join(),
					content_data: JSON.stringify(content_data),
					f_category: category[0],
					s_category: category[1]
				};
				await this.$service.servicecard[this.editing ? "edit" : "add"](form).done(() => {
					this.saving = false;
				});
				this.$message.success(this.type == "add" ? "新增成功" : "修改成功");
				this.close();
				this.parent.refresh(this.type == "add" ? true : false);
			});
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-divider {
		margin: 20px 0;
		background-color: #ebeef5;
	}
	.el-upload--picture-card {
		width: 110px;
		height: 110px;
		line-height: 110px;
	}
}
</style>
